<template>
  <CollapseContainer
    :title="t('routes.dashboard.account.setting.msgNotify.title')"
    :canExpand="false"
  >
    <List>
      <ListItem>
        <template #actions>
          <a>
            <Switch
              :checked-children="t('routes.dashboard.account.setting.msgNotify.switchOn')"
              :un-checked-children="t('routes.dashboard.account.setting.msgNotify.switchOff')"
              :checked="true"
              :disabled="true"
            />
          </a>
        </template>
        <ListItemMeta>
          <template #avatar>
            <img class="avatar" width="40" :src="noticeImg" />
          </template>
          <template #title>
            {{ t('routes.dashboard.account.setting.msgNotify.noticeTitle') }}
          </template>
          <template #description>
            <div>
              {{ t('routes.dashboard.account.setting.msgNotify.noticeDescription') }}
            </div>
          </template>
        </ListItemMeta>
      </ListItem>
      <ListItem>
        <template #actions>
          <a>
            <Switch
              :checked-children="t('routes.dashboard.account.setting.msgNotify.switchOn')"
              :un-checked-children="t('routes.dashboard.account.setting.msgNotify.switchOff')"
              :checked="true"
              :disabled="true"
            />
          </a>
        </template>
        <ListItemMeta>
          <template #avatar>
            <Icon class="avatar" icon="openmoji:mobile-message" />
          </template>
          <template #title>
            {{ t('routes.dashboard.account.setting.msgNotify.newsTitle') }}
          </template>
          <template #description>
            <div>
              {{ t('routes.dashboard.account.setting.msgNotify.newsDescription') }}
            </div>
          </template>
        </ListItemMeta>
      </ListItem>
      <ListItem>
        <template #actions>
          <a>
            <Switch
              :checked-children="t('routes.dashboard.account.setting.msgNotify.switchOn')"
              :un-checked-children="t('routes.dashboard.account.setting.msgNotify.switchOff')"
              :checked="true"
              :disabled="true"
            />
          </a>
        </template>
        <ListItemMeta>
          <template #avatar>
            <img class="avatar" width="40" :src="taskImg" />
          </template>
          <template #title>
            {{ t('routes.dashboard.account.setting.msgNotify.taskTitle') }}
          </template>
          <template #description>
            <div>
              {{ t('routes.dashboard.account.setting.msgNotify.taskDescription') }}
            </div>
          </template>
        </ListItemMeta>
      </ListItem>
    </List>
  </CollapseContainer>
</template>
<script lang="ts" setup>
  import { List, Switch } from 'ant-design-vue';
  import { CollapseContainer } from '@/components/Container/index';
  import Icon from '@/components/Icon/Icon.vue';
  import { useI18n } from '@/hooks/web/useI18n';

  import noticeImg from '@/assets/images/notice_2x.png';
  import taskImg from '@/assets/images/task_2x.png';

  const ListItem = List.Item;
  const ListItemMeta = List.Item.Meta;

  const { t } = useI18n();
</script>

<style lang="less" scoped>
  .avatar {
    font-size: 40px !important;
  }
</style>
